<template>
    <div class="">
        <div class="float_left tree_box">
            <h4 class="margin_bottom20">码表结构</h4>
            <el-tree :data="treeJson" ref="tree"
                    node-key="id"
                    :default-expanded-keys="['1']"
                    :props="defaultProps"
                    :load="loadNode"
                    :expand-on-click-node="true"
                    @current-change="currentChange"
                    highlight-current
                    lazy
                    >
            </el-tree>
        </div>
        <div class="operate_main">
            <h4 class="margin_bottom20">码表内容</h4>
            <el-form :inline="true" :model="selectedCodeTable" class="demo-form-inline" label-width="80px" label-position="right">
                <el-form-item label="类型">
                    <el-select v-model="selectedCodeTable.itemType" placeholder="请选择" size="small" style="width:162px;">
                        <el-option :key="1" label="码表项" :value="1"></el-option>
                        <el-option :key="2" label="值项" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="唯一标识">
                    <el-input v-model="selectedCodeTable.innerName" placeholder="唯一标识" :disabled="true" size="small"></el-input>
                </el-form-item>
                <el-form-item label="显示名">
                    <el-input v-model="selectedCodeTable.itemName" placeholder="中文名" size="small"></el-input>
                </el-form-item>
                
                <el-form-item label="值类型" v-if="selectedCodeTable.itemType == 2">
                    <el-select v-model="selectedCodeTable.valueType" placeholder="请选择" size="small" style="width:162px;">
                        <el-option :key="1" label="文本" :value="1"></el-option>
                        <el-option :key="2" label="图片" :value="2"></el-option>
                        <el-option :key="3" label="富文本" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示顺序">
                    <el-input v-model="selectedCodeTable.displayOrder" placeholder="显示顺序" size="small" style="width:50px;"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="值" v-if="selectedCodeTable.itemType == 2">
                    <el-input v-if="selectedCodeTable.valueType == 1" v-model="selectedCodeTable.itemValue" placeholder="值" size="small" style="width:400px;"></el-input>

                    <el-upload class="avatar-uploader" v-if="selectedCodeTable.valueType == 2"
                        :action="uploadPath"
                        :show-file-list="false"
                        :on-success="setAvatar"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="selectedCodeTable.itemValue" :src="selectedCodeTable.itemValue" class="avatar" width="200">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div v-show="selectedCodeTable.valueType == 3">
                         <v-editor id="editor1" :input-content="inputContent1" :upload-url="uploadURL" v-model="selectedCodeTable.itemValue"></v-editor>
                    </div>
                </el-form-item>
                <br>
                
                <el-form-item style="vertical-align: bottom; margin-left:20px;">
                    <el-button type="primary" size="small" @click="update" :disabled="selectedCodeTable.itemLevel == 0">保存修改</el-button>
                </el-form-item>
                <el-form-item style="vertical-align: bottom">
                    <el-button type="success" size="small" @click="addChild" :disabled="selectedCodeTable.itemLevel == 0">添加子项</el-button>
                </el-form-item>
                <el-form-item style="vertical-align: bottom">
                    <el-button type="success" size="small" @click="addBrother" :disabled="selectedCodeTable.itemLevel == 0">添加同级码表项</el-button>
                </el-form-item>
                <el-form-item style="vertical-align: bottom">
                    <el-button type="danger" size="small" @click="deleteRow(selectedCodeTable.id)" :disabled="selectedCodeTable.itemLevel == 0">删除此项</el-button>
                </el-form-item>
            </el-form>
            <template>
                <el-table :data="tableData" border style="width: 100%">
                    <!-- <el-table-column header-align="center" type="selection" width="45"> </el-table-column> -->
                    <el-table-column header-align="center" label="类型" width="90">
                        <template scope="scope">
                            {{tableData[scope.$index].itemType == 1? '码表项': '值项'}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="innerName" label="唯一标识"  width="200"></el-table-column>
                    <el-table-column header-align="center" prop="itemName" label="显示名" width="180"></el-table-column>
                    <el-table-column header-align="center" label="值" width="250">
                        <template scope="scope">
                            <span v-if="tableData[scope.$index].valueType == 1">
                                {{tableData[scope.$index].itemValue}}
                            </span>
                            <img v-if="tableData[scope.$index].valueType == 2" :src="tableData[scope.$index].itemValue" width="200"></img>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" label="值类型" width="100">
                        <template scope="scope">
                            {{tableData[scope.$index].valueType == 1? '文本': tableData[scope.$index].valueType == 2? '图片': '富文本'}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" label="操作" width="100">
                        <template scope="scope">
                            <el-button @click="edit(tableData[scope.$index])" type="text" size="small">编辑</el-button>
                            <el-button @click.native.prevent="deleteRow(tableData[scope.$index].id)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!-- 表单弹窗 -->
        <el-dialog title="添加码表" v-model="dialogFormVisible">
            <el-form :model="codeTable" ref="form" label-position="right" label-width="80px">
                <el-form-item label="类型">
                    <el-select v-model="codeTable.itemType" placeholder="请选择" size="small" style="width:162px;">
                        <el-option :key="1" label="码表项" :value="1"></el-option>
                        <el-option :key="2" label="值项" :value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="唯一标识" prop="innerName" :rules="[{ required: true, message: '唯一标识不能为空'}]" v-if="codeTable.itemType == 1">
                    <el-input v-model="codeTable.innerName" v-if="this.addStat === 0" placeholder="唯一标识" size="small" style="width:400px;"></el-input>
                    <el-input v-model="codeTable.innerName" v-if="this.addStat === 1" :disabled="true" placeholder="唯一标识" size="small" style="width:400px;"></el-input>
                </el-form-item>
                <el-form-item label="显示名" prop="itemName">
                    <el-input v-model="codeTable.itemName" placeholder="中文名" size="small" style="width:400px;"></el-input>
                </el-form-item>
                <el-form-item label="内部名" prop="innerName"  v-if="codeTable.itemType == 2">
                    <el-input v-model="codeTable.innerName" v-if="this.addStat === 0" placeholder="内部名" size="small" style="width:400px;"></el-input>
                    <el-input v-model="codeTable.innerName" v-if="this.addStat === 1" :disabled="true" placeholder="内部名" size="small" style="width:400px;"></el-input>
                </el-form-item>
                <el-form-item label="值类型" prop="valueType" :rules="[{ required: true, message: '菜单名不能为空'}]" v-if="codeTable.itemType == 2">
                    <el-select v-model="codeTable.valueType" placeholder="请选择" size="small">
                        <el-option :key="1" label="文本" :value="1"></el-option>
                        <el-option :key="2" label="图片" :value="2"></el-option>
                        <el-option :key="3" label="富文本" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="显示顺序" prop="displayOrder" :rules="[{ required: true, message: '显示顺序不能为空'}]">
                    <el-input v-model="codeTable.displayOrder" placeholder="显示顺序" size="small" style="width:50px;"></el-input>
                </el-form-item>

                <el-form-item label="值" v-if="codeTable.itemType == 2">
                    <el-input v-if="codeTable.valueType == 1" v-model="codeTable.itemValue" placeholder="值" size="small" style="width:400px;"></el-input>

                    <el-upload class="avatar-uploader" v-if="codeTable.valueType == 2"
                        :action="uploadPath"
                        :show-file-list="false"
                        :on-success="setAvatar"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="codeTable.itemValue" :src="codeTable.itemValue" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div v-show="codeTable.valueType == 3">
                         <v-editor id="editor2" :input-content="inputContent2" :upload-url="uploadURL" v-model="codeTable.itemValue"></v-editor>
                    </div>
                
                </el-form-item>

                <el-form-item label="扩展值" v-if="codeTable.itemType == 2">
                    <el-input v-model="codeTable.extA" placeholder="扩展值" size="small" style="width:400px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>

        <div class="clear"></div>

    </div>
</template>
<script>
    let id = 1000;
    import Editor from '../../components/editor.vue'
    export default {
        name:'codeTable',
        data() {
            return {
                treeJson: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                tableData: [],
                codeTable: {
                    id: '',
                    innerName: '',
                    itemName: '',
                    itemValue: '',
                    itemStatus: '',
                    itemLevel: '',
                    itemType: '',
                    valueType: '',
                    displayOrder: 0 ,
                    parentId: ''
                },
                uploadPath: '',
                selectedCodeTable: '',
                dialogFormVisible: false,
                formLabelWidth: '120px',
                inputContent1: '',
                inputContent2: '',
                uploadURL: '',//编辑器的上传图片地址   
                addStat: 0 //0添加，1编辑 
            }
        },
    methods: {
        loadNode(node, resolve) {
            console.log("自动加载啊");
            // console.log(node);
            var id = "";
            if(node.data.id != null) {
                id = node.data.id
            }
            this.$http.get(API.rootPath + "/codeTableTree/" + id).then((response) => {
                if(response.body.status == 0) {
                    resolve(response.body.data);
                }
            }, (response) => {
                // error callback
            });
        },
            setAvatar(res, file) {
                console.log("上传成功了", res);
                this.codeTable.itemValue = res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                // console.log("isJpg:", isJPG);
                // if (!isJPG) {
                //     this.$message.error('上传头像图片只能是 JPG 格式!');
                //     return;
                // }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                    return;
                }
                return isLt2M;
            },

        //点击左侧的菜单树的时候进行查询本菜单数据以及修改显示右侧的儿子级所有菜单
        currentChange(data, node) {
            this.$http.get(API.rootPath + "/codeTables/" + data.id).then((response) => {
                console.log(response.body.data);

                this.selectedCodeTable = response.body.data.codeTable;
                this.tableData = response.body.data.children;

                //如果是富文本的类型的话，还得给inputContent赋值
                if(this.selectedCodeTable.valueType == 3) {
                    this.inputContent1 = this.selectedCodeTable.itemValue;
                }
            }, (response) => {
                // error callback
            }); 

        },

        //修改菜单的基本信息
        update() {
            this.$http.put(API.rootPath + "/codeTables", this.selectedCodeTable).then((response) => {

                if(response.body.status == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                        customClass: 'messageDIY'
                    });
                }
            });
            this.addStat = 0;
            this.dialogFormVisible = false;
        },

        //添加子菜单，弹出dialog
        addChild() {
            this.addStat = 0;
            this.initEntity();
            this.dialogFormVisible = true;
            this.codeTable.parentId = this.selectedCodeTable.id;
            this.codeTable.itemLevel = this.selectedCodeTable.itemLevel + 1;
        },

        //添加兄弟菜单，弹出dialog
        addBrother() {
            this.addStat = 0;
            this.initEntity();
            this.dialogFormVisible = true;
            this.codeTable.parentId = this.selectedCodeTable.parentId;
            this.codeTable.itemLevel = this.selectedCodeTable.itemLevel;
        },

        //添加子菜单的保存方法
        add() {
            this.addStat = 0;
            var vm = this;
            this.$http.post(API.rootPath + "/codeTables", this.codeTable, {emulateJSON: false}).then((response) => {

                if(response.body.status == 0) {
                    this.$message({
                        message: '保存成功',
                        type: 'success',
                        customClass: 'messageDIY'
                    });

                    //重置表单，其实就是将表单的内容设置为空
                    this.$refs['form'].resetFields();

                    //关闭添加窗口
                    this.dialogFormVisible = false;
                    this.$http.get(API.rootPath + "/codeTableTree").then((response) => {
                        // console.log(response.body.data);
                        this.treeJson = response.body.data;
                    }); 

                    this.currentChange(this.selectedCodeTable, null);
                } else {
                    this.$message({
                        type: 'warning',
                        message: response.body.msg
                    });
                }
            });
        },

        edit(codeTable) {
            this.addStat = 1;
            //浅拷贝，将选中的某行的codeTable赋值给codeTable，修改之后会影响这条被选中的codeTable
            this.codeTable = codeTable;

            //如果是富文本的类型的话，还得给inputContent赋值
            if(this.codeTable.valueType == 3) {
                this.inputContent2 = this.codeTable.itemValue;
            }

            //打开新增和编辑的窗口
            this.dialogFormVisible = true;
        },

        deleteRow(id) {
            this.$confirm('确定删除此项以及其所有子项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.$http.delete(API.rootPath + "/codeTables/" + id).then((response) => {

                    //返回值是0的时候表示成功,重新加载数据
                    if(response.body.status == 0) {

                        //删除成功之后重新加载数据
                        this.$http.get(API.rootPath + "/codeTableTree").then((response) => {

                            this.treeJson = response.body.data;
                        });

                        // this.currentChange(this.selectedCodeTable, null);
                        this.selectedCodeTable = {
                            id: '',
                            innerName: '',
                            itemName: '',
                            itemValue: '',
                            itemStatus: '',
                            itemLevel: '',
                            itemType: '',
                            valueType: '',
                            displayOrder: 0 ,
                            parentId: ''
                        }
                    }
                }, (response) => {
                    // error callback
                }); 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });            
        },
        initEntity() {
            this.codeTable = {
                    id: '',
                    innerName: '',
                    itemName: '',
                    itemValue: '',
                    itemStatus: '',
                    itemLevel: '',
                    itemType: '',
                    valueType: '',
                    displayOrder: 0 ,
                    parentId: ''
                }
        },
    },
    
    //引入文本编辑器那个组件
    components: {
        'v-editor': Editor
    },
    created() {
        this.selectedCodeTable = this.codeTable;
        this.uploadPath = API.rootPath + "/rap/images/avatars/codeTable";
        this.uploadURL = API.rootPath + "/rap/images/editors/codeTable";

        // this.$http.get(API.rootPath + "/codeTableTree").then((response) => {
        //     // console.log(response.body.data);

        //     this.treeJson = response.body.data;
        // }, (response) => {
        //     // error callback
        // }); 
    }
};
</script>

